{extend name="public:base" /}
{block name="action"}
<button type="button" class="btn btn-w-m btn-primary cc" data-toggle="modal" data-target="#add-form"><i
        class="fa fa-plus"></i>添加
</button>
{/block}
{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight" xmlns="http://www.w3.org/1999/html">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">

                    <form method="get">
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="input-group">
                                    <input placeholder="输入部门名称搜索" value="{$params['query']}" name="query" type="text"
                                           class="form-control form-control-sm">
                                    <span class="input-group-append">
                                    <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-search"></i>搜索! </button>
                                </span>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="ibox-content">
                    <div class="table-responsive">
                        <table class="table table-striped datalist-table">
                            <thead>
                            <tr>
                                <th>id</th>
                                <th>名称</th>
                                <th>父级</th>
                                <th>描述</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {notempty name="list"}
                            {volist name="list" id="vo"}
                            <tr>
                                <td>{$vo.id}</td>
                                <td>{$vo.name}</td>
                                <td>{$vo.parentDepartment.name}</td>
                                <td>{$vo.describe}</td>
                                <td>{$vo.create_time}</td>
                                <td class="project-actions">
                                    <button type="button" class="btn btn-warning btn-sm edit-btn" data-id="{$vo.id}"><i
                                            class="fa fa-edit"></i> 编辑
                                    </button>
                                    <a href="{:url('delete', ['id' => $vo['id']])}"
                                       class="btn btn-danger btn-sm ajax-del"><i class="fa fa-trash-o"></i> 删除 </a>
                                </td>
                            </tr>
                            {/volist}
                            {/notempty}
                            </tbody>
                        </table>
                        {$list->render()}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="add-form" class="modal fade" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <h3 class="m-t-none m-b">部门信息</h3>
                            <form role="form" action="{:url('save')}" id="position-form">
                                <input type="hidden" name="id">
                                <div class="form-group">
                                    <label>上级名称：</label>
                                    <div class="i-select">
                                        <select name="pid" class="form-control">
                                            <option value="">最顶级</option>
                                            {notempty name="tree"}
                                            {volist name="tree" id="vo" key="k"}
                                            {eq name="k" value="1"}
                                            <option value="{$vo.id}">├{$vo.name}</option>
                                            {else/}
                                            {egt name="k" value=":sizeof($tree)"}
                                            <option value="{$vo.id}">└{$vo.name}</option>
                                            {else/}
                                            <option value="{$vo.id}">├{$vo.name}</option>
                                            {/egt}
                                            {/eq}
                                            {gt name="vo['children']" value="0"}
                                            {volist name="vo.children" id="cvo" key="ck"}
                                            {if condition="$ck eq 1 and sizeof($vo.children)==1"}
                                            <option value="{$cvo.id}">├┴{$cvo.name}</option>
                                            {else/}
                                            {eq name="ck" value="1"}
                                            <option value="{$cvo.id}">├─┼{$cvo.name}</option>
                                            {else/}
                                            {neq name="ck" value=":sizeof($vo.children)"}
                                            <option value="{$cvo.id}">├─┼{$cvo.name}</option>
                                            {else/}
                                            <option value="{$cvo.id}">├─┴{$cvo.name}</option>
                                            {/neq}
                                            {/eq}
                                            {/if}
                                            {/volist}
                                            {/gt}
                                            {/volist}
                                            {/notempty}
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>部门名称：</label>
                                    <input type="text" name="name" placeholder="请输入部门名称" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label>部门描述：</label>
                                    <textarea class="form-control message-input" name="describe"
                                              placeholder="请输入部门描述"></textarea>
                                </div>
                                <div>
                                    <button class="btn btn-sm btn-primary float-right m-t-n-xs" type="submit">
                                        <strong>确定</strong>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script type="text/javascript">
    $(document).ready(function () {
        $(".datalist-table").on("click", ".edit-btn", function (e) {
            loadingDetail($(e.currentTarget).data("id")).then(data => {
                $("#add-form").find("input[name='id']").val(data.data.id);
                $("#add-form").find("input[name='name']").val(data.data.name);
                $("#add-form").find("textarea[name='describe']").val(data.data.describe);
                $("#add-form").find("select[name='pid']").val(!!data.data.pid ? data.data.pid : "");
                $("#add-form").find("select[name='pid']>option").each(function (e) {
                    if (($(this).val() - data.data.id) === 0) {
                        $(e.currentTarget).attr("disabled", true);
                    }
                });
                $("#add-form").modal("show");
            });
        })
        $('.cc').click(function(){
            $("input[ name='id'] ").val("");
        })
        function loadingDetail(id) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: "{:url('show')}?id=" + id,
                    type: "get",
                    dataType: "json",
                    success: function (res) {
                        resolve(res);
                    },
                    error: function (err) {
                        reject(err);
                    }
                });
            })
        }

        $("#position-form").validate({
            rules: {
                name: {
                    required: true,
                    minlength: 2,
                    maxlength: 20
                }
            },
            messages: {
                name: {
                    required: " 请输入职位名称",
                    minlength: "职位名称最少2个字",
                    maxlength: "职位名称最多20个字"
                }
            },
            submitHandler: function (form, data, last) {
                let postData = {
                    name: $("input[name='name']").val(),
                    describe: $("textarea[name='describe']").val(),
                    pid: $("select[name='pid']").val()
                };
                let url = "";
                if ($("input[name='id']").val() !== '') {
                    postData['id'] = $("input[name='id']").val();
                    url = "{:url('edit')}";
                    let type = "post";
                } else {
                    url = "{:url('add')}";
                }
                var index = layer.load(2, {content: "请稍等...", shade: [0.2, '#000']});
                $.ajax({
                    url,
                    data: {...postData},
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        if (data.code === 1) {
                            toast.success(data.msg, {duration: data.wait * 1000, progressBar: true}).then(function () {
                                layer.close(index);
                                window.location.reload();
                            });
                        } else {
                            toast.warning(data.msg, {duration: data.wait * 1000}).then(function () {
                                layer.close(index);
                            });
                        }
                    },
                    error: function (err) {
                        layer.close(index);
                        toast.error("操作失败", {});
                    }
                })
                return false;
            },
        });
    });
</script>
{/block}